<template>
	<div class="totalMember">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>停车记录</el-breadcrumb-item>
				<el-breadcrumb-item>泊位视频识别分析</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容-->
		<div class="content">
			<!--图表-->
			<div class="chartsWrapper">
				<el-row :gutter="20">
					<el-col :span="12">
						<div class="parktrend wrapper">
							<div class="title">
								充值占比
							</div>
							<ve-ring :height="'300px'" :data="chartData" :settings="chartSettings" tooltip-visible legend-visible></ve-ring>							
						</div>
					</el-col>
		  			<el-col :span="12">
		  				<div class="parkrecord wrapper">
		  					<div class="title">
								会员停车记录占比
							</div>
		  					 <ve-pie :height="'300px'" :data="chartData" :settings="chartSettings" tooltip-visible legend-visible></ve-pie>
		  				</div>
		  			</el-col>
				</el-row>
			</div>
			<!--搜索条件区域-->
			<div class="searchWrapper">
				<el-form :inline="true" label-position="right" label-width="90px" :model="formInline" class="demo-form-inline">					
					<el-form-item label="手机号">
		            	<el-input v-model.trim="formInline.phoneNumber" auto-complete="off" placeholder="请输入内容"></el-input>
		            </el-form-item>
		            <el-form-item label="车牌号">
		           	 <el-input v-model.trim="formInline.plateNumbers" auto-complete="off" placeholder="请输入内容"></el-input>
		            </el-form-item>
		            <el-form-item label="注册时间段">
		            	<el-input v-model.trim="formInline.createTime" auto-complete="off" placeholder="请输入内容"></el-input>
		            </el-form-item>
									
					<el-button type="primary" icon="search" @click="searchData">查询</el-button>
					<!--<el-button type="success" icon="plus" @click="">添加</el-button>-->				
				</el-form>
			</div>
			<!--列表区域-->
			<div class="tableWrapper">
				<el-table v-loading="loading" :data="tableData" style="width: 100%" height="400">
					<el-table-column type="index" label="序号" width="70"></el-table-column>
					<el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="item in tableCols" :key="item.prop" :formatter="item.formatter"></el-table-column>
					<!--<el-table-column label="操作" width="70">
						<template scope="scope">
							<el-button type="text" @click="showDetail(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>-->
				</el-table>
			</div>
			<!--分页器-->
			<div class="pagerWrapper">
				<div class="block">					
					<el-pagination @size-change="" @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getData,
		dateFormat
	} from '../../common/js/public.js'
	export default {
		name: 'totalMember',
		data () {
			return {
				total: 0,
				pageSize: 15,
				pageNum: 1,
				loading: false,
				tableCols: [{
					prop: 'cityName',
					label: '手机号',
					width: '80'
				}, {
					prop: 'rsType',
					label: '绑定车牌',
					width: '',
					formatter: (row, column) => {
						if (row.rsType == 0) {
							return '开放';
						} else if (row.rsType == 1) {
							return '封闭';
						} else if (row.rsType == 2) {
							return '半封闭';
						} else if (row.rsType == 3) {
							return '垂停';
						} else if (row.rsType == 4) {
							return '混合';
						} else if (row.rsType == 5) {
							return 'PDA';
						}
					}
				}, {
					prop: 'parkName',
					label: '账户余额（元）',
					width: ''
				}, {
					prop: 'tenantName',
					label: '注册时间',
					width: ''
				}, {
					prop: 'address',
					label: '充值次数',
					width: ''
				}, {
					prop: 'showCode',
					label: '停车次数',
					width: ''
				}, {
					prop: 'totalSpace',
					label: '缴费次数',
					width: ''
				}],
				tableData: [],
				formInline: {
					phoneNumber: '',
					plateNumbers: '',
					createTime: ''
				}				
			}
		},
		methods: {
			handleCurrentChange (val) {
		       this.pageNum = val;
		       this.searchData();
		    },
			showLog (data) {
				if (data && data.length === 2) {
					let startTime = dateFormat(data[0], 'yyyy-MM-dd HH:mm:ss');
					let endTime = dateFormat(data[1], 'yyyy-MM-dd HH:mm:ss');
					this.formInline.startTime = startTime;
					this.formInline.endTime = endTime;
				}				
			},
			// 搜索
			searchData () {
				this.tableData = [];
				this.loading = true;
				let opt = {
					url: '/gplus/park/queryAllPark',
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					data: this.formInline,
					success: (res) => {
						this.tableData = res.data.ParkVO;
						this.total = res.total;
						this.loading = false;
					},
					fail: (res) => {						
						this.loading = false;
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			}
		},
		components: {	
		},
		created () {
			this.chartData = {
				columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
				rows: [{
					'日期': '1月1日',
					'销售额-1季度': 1523,
					'销售额-2季度': 1523,
					'占比': 0.12,
					'其他': 100
				}, {
					'日期': '1月2日',
					'销售额-1季度': 1223,
					'销售额-2季度': 1523,
					'占比': 0.345,
					'其他': 100
				}, {
					'日期': '1月3日',
					'销售额-1季度': 2123,
					'销售额-2季度': 1523,
					'占比': 0.7,
					'其他': 100
				}, {
					'日期': '1月4日',
					'销售额-1季度': 4123,
					'销售额-2季度': 1523,
					'占比': 0.31,
					'其他': 100
				}, {
					'日期': '1月5日',
					'销售额-1季度': 3123,
					'销售额-2季度': 1523,
					'占比': 0.12,
					'其他': 100
				}, {
					'日期': '1月6日',
					'销售额-1季度': 7123,
					'销售额-2季度': 1523,
					'占比': 0.65,
					'其他': 100
				}]
			}
			this.chartSettings = {
		      dimension: '日期',
		      metrics: '销售额-1季度',
		      dataType: 'KMB',
		      selectedMode: 'single',
		      hoverAnimation: false,
		      offsetY: 200
		    }		
		},
		computed: {			
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 30px;
	overflow: hidden;	
.content	
	background: #FFFFFF;
	overflow: hidden;
	.chartsWrapper
		height: 360px;
		margin-bottom: 20px;
		.wrapper
			background: #FFFFFF;
			border: 1px solid #C0CCDA;
			border-radius: 4px;
			.title
				font-size: 14px;
				color: #475669;
				padding-left: 17px;
				height: 50px;
				line-height: 50px;
	.searchWrapper
		overflow: hidden;
		background: #EFF2F7;
		padding: 22px 22px 0;
		margin-bottom: 20px;
	.pagerWrapper
		text-align: right;		
		margin-top: 28px;
		font-size: 12px;
		.export
			font-size: 12px;
			.iconfont
				margin-right: 0;
</style>
